<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="20">
        <div class="logo" >
          <img v-if="baseJs.intranet" src="../assets/h-logo-1.png" alt=""/>
			<!--<span v-else class="txt ml-20"><span></span></span>-->
          <span v-else class="txt ml-20">蒸汽<span>超市</span></span>
        </div>
        <i :class="['iconfont minBtn pointer transition tc',{'icon-zhanxiancaidan-':sidebar.opened,'icon-suohuicaidan-':!sidebar.opened}]" @click="toggleSideBar"></i>
        <span v-if="baseJs.intranet" class="txt"><span></span></span>
        <!--<span v-if="baseJs.intranet" class="txt">蒸汽<span>超市</span></span>-->
        <!-- <div class="kit-loading" v-if="!baseJs.intranet">
						<div class="yuan-box ofh">
						</div>
            <div class="robot"></div>
						<div class="eye-box ofh">
							<div class="eye fl"></div>
							<div class="eye fr"></div>
						</div>
					</div> -->
      </el-col>
			<el-col :span="4" class="userinfo">
          <!-- <div class="annouceDiv fl">
              <i class="iconfont icon-naozhong" style="font-size: 36px;"></i>
              <span class="annouceSpan fr">1</span>
          </div> -->
          <el-col :span="12">
            <el-tooltip class="inlineBlock" effect="dark" content="全屏" placement="bottom">
              <screenfull class="screenfull right-menu-item"></screenfull>
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link userinfo-inner">{{name}}</span>
              <el-dropdown-menu slot="dropdown">
                <!--<el-dropdown-item>我的消息</el-dropdown-item>-->
                <!-- <el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item> -->
                <el-dropdown-item @click.native="loginCount">登陆统计</el-dropdown-item>
                <el-dropdown-item  @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        
				
			</el-col>
		</el-col>
		<el-col :span="24" class="main" :class="{'min-aside':sidebar.opened}">
      <menu-nav></menu-nav>

			<section class="content-container">
        <div class="loading-box" :class="{'unloading':!commonLoading}" v-loading.lock="commonLoading"></div>
        <div class="grid-content bg-purple-light">
					<el-row class="breadcrumb-container">
            <!-- <el-col :span="2">
              	<strong class="title">{{$route.name}}</strong>
            </el-col> -->
            <el-col :span="24">
              <tabs-view></tabs-view>
            </el-col>
					
						<!-- <el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb> -->
            
					</el-row>
					<div class="content-wrapper" v-show="showRouteView">
						<transition>
              <keep-alive>
							  <router-view></router-view>
              </keep-alive>
						</transition>
					</div>
          <div class="content-wrapper ofh" v-show="!showRouteView">
            <transition-group>
              <iframe v-for="item in iframeArray" 
              v-show="item.path==iframeActive"
              :key="item.path"
              :src="item.src"
              :id="item.path" frameborder="0" width="100%" height="100%"></iframe>
						</transition-group>
          </div>
           
				</div>
        
			</section>
		</el-col>
	

  <!-- 修改密码弹窗 -->
      <el-dialog :title="'修改密码'" v-model="changepwd"  @close="isEdit=false" size="auto"> 
      <el-form :model="changeForm" label-width="60px" ref="changeForm" :rules="editFormRules">
        <el-form-item label="原密码:" prop="password" :label-width="formLabelWidth">
          <el-input type="password" placeholder="请输入原密码" v-model="changeForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword" :label-width="formLabelWidth">
          <el-input type="password" placeholder="请输入新密码" v-model="changeForm.newpassword" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="secondpassword" :label-width="formLabelWidth">
          <el-input type="password" placeholder="请再次输入新密码" v-model="changeForm.secondpassword" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer">
          <el-button @click.native="changepwd = false">关闭</el-button>
          <el-button type="primary" @click.native="change(changeForm)" v-show="!isEdit">确定</el-button>
        </div>
      </el-dialog>
    </el-row>
</template>

<script>
  import menuNav from './menu.vue'
  import { mapGetters } from 'vuex'
  import {resetPw} from '../api/system'
  import TabsView from '../components/TabsView'
  import Screenfull from '../components/Screenfull'
  require ('../common/map');
  export default {
    components: {
      menuNav,TabsView,Screenfull
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'name',
        'commonLoading',
        'userId',
        'showRouteView',
        'iframeArray',
        'iframeActive'
      ])
    },
		data() {
      //修改密码判断两次密码是否相同
        var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'));
        } else if (value !== this.changeForm.newpassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
        };
			return {
        //输入密码规则
        editFormRules:{
           password:[{required:true, message:'请输入原密码',trigger:'blur'}],
           newpassword:[{required:true,message:'请输入新密码',trigger:'blur'},
           { min:8, max:30, message:'包含大小写字母数字8-30位',trigger:'blur'}],
           secondpassword:[{required:true,validator:validatePass2,trigger:'blur'}],
        },
        sysUserName:'',
				sysUserAvatar: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: '',
				},
          changepwd:false,
          isEdit:false,
          changeForm:{
            secondpassword:'',
          },
          formLabelWidth:'90px',
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				//console.log('handleopen');
			},
			handleclose() {
				//console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
      toggleSideBar() {
        this.$store.dispatch('ToggleSideBar')
      },
			//退出登录
			logout: function () {
        var _this = this;
        this.$confirm('确认退出吗?', '提示', {
          //type: 'warning'
        }).then(()=> {
          this.$store.dispatch('LogOut').then(() => {
            this.$router.replace({
              path: '/',
              query: {logout:'logout'}
            });
          });

        }).catch(()=> {

        });
			},
      // 登陆统计
      loginCount:function(){
        this.$router.push({
          path: '/loginCount'
        });
      },
      //修改密码
      changePwd:function(){
        this.changepwd=true;
        this.changeForm.password="";
        this.changeForm.newpassword="";
        this.changeForm.secondpassword="";
        console.log(this.userId);
      },
      change:function(changeForm){
        this.$refs['changeForm'].validate((valid) => {
        var para={
      "id":this.userId,
      "password":this.changeForm.password,
      "newpassword":this.changeForm.newpassword,
      "secondpassword":this.changeForm.secondpassword,
     }
    // console.log(para);
    // if(this.changeForm.newpassword==this.changeForm.secondpassword&&this.changeForm.password!=""&&this.changeForm.newpassword!="")
    // {
      if (valid) {
       resetPw(para).then(res=>{
       if(res.success=="true")
       {
          // this.changeForm.password="";
          // this.changeForm.newpassword="";
          // this.changeForm.secondpassword="";
          this.changepwd=false;
       }else{
          this.changepwd=true;
       }

    })
     }else{
              //将表单清空
              //this.$message('新增失败！');
              //onsole.log('error submit!!');
              return false;
          }
        }) 
      }

		},
		mounted() {
		}
	}

</script>

<style lang="scss">
.userinfo{
  .iconfont{color:#fff}
  .annouceDiv{background-color: #3fa9f7;height: 60px;padding-left: 10px;padding-right: 10px;}
  .annouceSpan{
    color: #fff;
    background-color: red;
    position: relative;
    border-radius: 10px;
    left: 2px;
    padding-right: 5px;
    text-shadow: none;
    font-size: 12px;
    padding: 2px 5px 2px 5px;
    font-weight: normal;
    line-height: 15px;
  }
}      
// .kit-loading{
// 			width:80px;height:68px;margin:0 auto;
// 			position:relative;      
// 			.yuan-box{
//         position:absolute;top:-20px;left:-16px;
// 				width:110px;height:110px;
// 				border-radius:50%;
        
// 				// border:4px solid red;
// 				// border-right:4px solid transparent;
// 				// border-left:4px solid transparent;
// 				// border-bottom:4px solid transparent;
// 				// animation: rotation 1.5s linear infinite;
//         z-index:-1;
//         background:url("") no-repeat center top;
//         background-size:100% 100%;
//       }
//       .robot{
//         width:80px;height:68px;
//         margin:5px auto;overflow: hidden;
//         background:url("") no-repeat center top;
//         background-size:100% 100%;}
//       .eye-box{width:30px;height:30px;position:absolute;top:26%;left:34%;}
// 				.eye{width:14px;height:14px;border:solid 2px #ccc;border-radius:100%;position:relative;
// 				animation: rotation 1.5s linear infinite;
// 				&:before{content:'';width:6px;height:6px;background-color:#333;border-radius:100%;
// 					position:absolute;top:0;left:50%;margin-left:-2px;
// 				}
// 			}
// 		}
		
// 		@keyframes rotation{
// 		from {-webkit-transform: rotate(0deg);}
// 		to {-webkit-transform: rotate(360deg);}
// 		}
  .resetHomePw{.el-form-item__label{width:100px;}} 

  // @import "../style/mixin.scss";
	// .container {
	// 	position: absolute;
	// 	top: 0px;
	// 	bottom: 0px;
	// 	width: 100%;
	// 	&>.header {
	// 		height: 60px;
	// 		line-height: 60px;
	// 		background: #fff;border-bottom:solid 1px #d7dcde;
	// 		color: #c0ccda;position:relative;z-index:1;
	// 		.userinfo {
	// 			text-align: right;
	// 			padding-right: 35px;
  //       height:60px;
	// 			.userinfo-inner {
	// 				color: #fff;
  //         display:block;
  //         border-radius:100%;
	// 				cursor: pointer;
  //         background-color:#3fa9f7;width:40px;height:40px;line-height:40px;text-align:center;font-size:12px;
  //         margin:10px 0;
	// 				/*img {*/
	// 					/*width: 40px;*/
	// 					/*height: 40px;*/
	// 					/*border-radius: 20px;*/
	// 					/*margin: 10px 0px 10px 10px;*/
	// 					/*float: right;*/
	// 				/*}*/
	// 			}
	// 		}
	// 		.logo {
  //       background-color:#f8f9fa;
	// 			width:200px;height:60px;transition: all .28s ease-out;
  //       float:left;border-right:solid 1px #d7dcde;margin-right:20px;
	// 			img {
  //         width: 146px;
  //         transition: all .28s ease-out;
  //         margin: 14px 10px 4px 18px;
	// 			}
  //       &.min-logo{
  //           width:64px;padding-right:6px;overflow:hidden;
  //           img{width:124px}
  //        }
	// 		}
  //     .txt{font-size: 22px;
  //       color: #13b5f6;
  //       span{color:#a2abb2}
  //     }
  //     .minBtn{position:absolute;width:30px;height:30px;background-color:#fff;border-radius:100%;box-shadow:2px 2px 4px rgba(0,0,0,.2);
  //       line-height:30px;top:50%;margin-top:-15px;left:185px;color:#b8c4ce;
  //       &:hover{color:#333;}
  //     }
	// 	}
	// 	.main {
	// 		position: absolute;
  //     padding-top:60px;
	// 		overflow: hidden;
  //     height:100%;width:100%;
  //     padding-left:200px;

  //     transition: all .28s ease-out;
	// 		aside {
  //       width: 200px;
  //       height: 100%;
  //       position: fixed;
  //       top:60px;
  //       bottom: 0;
  //       left: 0;
  //       height:auto;
  //       z-index: 99999;
  //       background-color: #0d3771;
  //       overflow-x: hidden;
  //       transition: all .28s ease-out;
  //       .iconfont{font-size:17px}
  //       i:first-child{margin-right:26px}
  //       .el-menu-item.is-active{
  //         color:#12b7f5;
  //         font-weight:600;
  //         border-left:solid 6px #12b7f5;background-color:#0a2b58;
  //         position:relative;
  //         &:after{position:absolute;content: '';top:50%;right:0;margin-top:-6px;
  //          @include triangle(12px, 6px, #fff,left);
  //         }
  //       }
  //       &>ul{
  //           background-color: #0d3771;transition: all .28s ease-out;
  //         ul.el-menu{background-color: #0b3162;

  //         }
  //       }
  //       .el-menu--dark .el-menu-item:hover, .el-menu--dark .el-submenu__title:hover{background-color:#0a2b58}
  //     }
  //     &.min-aside{
  //        padding-left: 54px;
  //       aside{
  //         transform: translate(-146px, 0);
  //         &>ul{
  //           transform: translate(146px, 0);
  //         }
  //         &:hover{
  //          transform: translate(0, 0);
  //          &>ul{transform: translate(0, 0);}
  //         }
  //       }

  //     }
  //     .loading-box{position:absolute;top:0;
  //       z-index:999;width:100%;height:100%;
  //       &.unloading{z-index: inherit}
  //     }
	// 		.content-container {
	// 			background: #fff;
	// 			overflow-y: scroll;
	// 			height:100%;position:relative;
	// 			.breadcrumb-container {
  //         position:absolute;top:0;left:0;width:100%;
  //         padding:0 10px;overflow:hidden;
  //         margin: 15px 0;line-height:20px;
	// 				.title {
	// 					width: 200px;
	// 					float: left;
	// 					color: #475669;
	// 				}
	// 				.breadcrumb-inner {
	// 					float: right;height:20px;line-height:20px;
	// 				}
	// 			}
	// 			.content-wrapper {
  //         position:absolute;top:50px;right:0;bottom:0;left:0;
  //         width:auto;height:auto;
	// 				background-color: #fff;
	// 				box-sizing: border-box;
	// 			}
	// 		}
	// 	}
  //   .menu-list{
  //     .el-submenu{
  //       .el-menu-item{
  //         font-size:13px;text-indent:20px;
  //       }
  //     }
  //   }
	// }
</style>
